<template>
  <div>
    <!-- 下面众筹中的代码 -->
    <!-- 众筹中的外面大框 -->
    <div class="CrowfBox">
      <!-- 众筹中的里面大框 -->
      <div class="CrowfItem">
        <!-- 众筹中的里面打印大框 -->
        <div class="CrowfItem-body">
          <!-- 众筹中的里面打印小部分第一大框 -->
          <Nothing v-if="goodsArr.length == 0" />
          <div
            class="CrowfItem-smartBox"
            v-for="(item, index) in goodsArr"
            :key="index"
            @click="JumpFtn(item.gid)"
            
          >
            <img
              :src="item.g_picture"
              alt=""
              height="220"
              width="280"
              class="imgs"
            />

            <div class="Crow-font-img"></div>
            <div class="thumbs-up-box">
              <div class="thumbs-up-img"></div>
              <span>{{ item.likes_num }}</span>
            </div>
            <div class="introdu-box">
              <h4>
                {{ item.g_name }}
              </h4>
            </div>
            <!-- 进度条 -->
            <!-- <div class="progress-box"> -->
            <!-- <Progress :percent="progress"
                  :stroke-color="['#108ee9', '#87d068']"
                  text-inside
                  status="active"
                  :stroke-width="15"
                   class="progress-box-Item"
                   /> -->
            <!-- <span class="progress-box-Item"  style="width:%"></span> -->
            <Progress
              :percent="item.g_type"
              status="active"
              :stroke-color="['#108ee9', '#87d068']"
              style="margin-left: 20px;wdith:225px"
            />

            <!-- </div> -->
            <!-- 框的底部框 -->
            <div class="CrowfItem-smartBox-foot">
              <ul class="CrowfItem-smartBox-foot-Item">
                <!-- 已达 -->
                <li class="Reached">
                  <p class="percentage">{{ item.g_type }}%</p>
                  <p class="Reached-font">已达</p>
                  <span class="Vertical-line"></span>
                </li>
                <!-- 已愁 -->
                <li class="Ready">
                  <p class="percentage2">￥{{ item.g_start_money }}</p>
                  <p class="Ready-font2">已筹</p>
                  <span class="Vertical-line"></span>
                </li>
                <!-- 剩余时间 -->
                <li class="Remaining-time">
                  <p class="percentage3">{{ item.keep_time ? item.keep_time / 3600 / 24 + '天': "7天" }}</p>
                  <p class="Remaining-time-font">剩余时间</p>
                  <span class="Vertical-line"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <Page
          :total="dataCount"
          :page-size="pageSize"
          class="pageBtn"
          @on-change="changepage"
        />
        <!-- <div>众筹中</div> -->
      </div>
    </div>
    <!-- <div :style="{ color:size,fontSize:fize}">8888</div> -->
  </div>
</template>

<script>
import { Selectgoods } from "server/allproject.js";
import { Searchcontent } from "server/allproject.js";
import { SearchNav } from "server/allproject.js";
import { Searchavstate } from "server/allproject.js";
import { getNewGoods } from "server/allproject.js";
import { SearchsideNav } from "server/allproject.js";

export default {
  // name : "crowdfunding"
  // props:{
  //   deliverykeyword:{
  //     type:String
  //   }

  // },
  data() {
    return {
      //  size:'red',
      //  fize:'14px',
      progress: 0,
      progressArr: [],
      ajaxHistoryData: [],
      goodsArr: [], //总数据
      dataCount: 0,
      // 每页显示多少条
      pageSize: 8,
      allgoods: [],
    };
  },

  created() {
    this.$show.$on("sendsideNavText", this.deliverysideNav); //侧边导航栏传过来的id
    this.$show.$on("sendgetNewGoods", this.deliverygetNewGoods); //父组件传过来的，要去找最新的数据
    this.$show.$on("sendNavState", this.deliverynavstate); //父组件传过来的状态框内容
    this.$show.$on("sendText", this.deliverykeyword); //父组件传过来的搜索框内容
    this.$show.$on("sendNavText", this.deliveryNav); //服组件传过来的导航条的id
    //  this.goodsArr = res.data;
    this.handleListApproveHistory();
    this.searchProduct();
  },
  methods: {
    // 网上的代码，分页的代码区分开
    handleListApproveHistory() {
      this.ajaxHistoryData = [];
      this.ajaxHistoryData = this.goodsArr; // 取到的所有数据，用数组装起来
      this.dataCount = this.goodsArr.length; //拿到数据长度，绑定到页码上，作为总数据
      // 当长度小于定的每页显示数据数时
      if (this.goodsArr.length < this.pageSize) {
        this.goodsArr = this.ajaxHistoryData; //让打印的数据全部显示出来，例如最后一页的时候，例如有三条一页，但只剩两页，就全显示出来
      } else {
        this.goodsArr = this.ajaxHistoryData.slice(0, this.pageSize); //否则的话，就按照规定的每页几条出来
      }
    },
    changepage(index) {
      var _start = (index - 1) * this.pageSize; //开始的位置
      var _end = index * this.pageSize;
      this.goodsArr = this.ajaxHistoryData.slice(_start, _end); //结束的位置
    },
    //点击跳转带众筹详情页
    JumpFtn(e) {
      this.$router.push({
        path: "/front/detail",
        query: {
          gid: e,
        },
      });
    },
    //网上的代码区分开
    // ,
    //传过来的搜索内容
    deliverykeyword(e) {
      Searchcontent(e).then((res) => {
        this.goodsArr = res.data;
        this.$show.$emit("ceshi", this.goodsArr.length);
        this.handleListApproveHistory();
      });
      this.searchProduct();
    },
    // 传过来的状态
    deliverynavstate(e) {
      Searchavstate(e).then((res) => {
        this.goodsArr = res.data;
        this.$show.$emit("ceshi", this.goodsArr.length);
        this.handleListApproveHistory();
        this.computPro();
      });
    },
    // 传过来的导航id
    deliveryNav(e) {
      if (!e) {
        this.goodsArr = this.allgoods;
      } else {
        const fiterArr = this.allgoods.filter((v) => v.cid == e);
        this.goodsArr = fiterArr;
      }
      this.$show.$emit("ceshi", this.goodsArr.length);
      this.handleListApproveHistory();
      this.computPro();
    },
    // 传过来的最新上线
    deliverygetNewGoods(e) {
      getNewGoods(e).then((res) => {
        this.goodsArr = res.data;
      
        this.$show.$emit("ceshi", this.goodsArr.length);
        this.handleListApproveHistory();
        this.computPro();
      });
    },
    //侧导航栏传传过来的ID
   
    // 页面一打开的数据
    searchProduct() {
      // let that = this;
      Selectgoods().then((res) => {
        this.goodsArr = res.data;
        this.allgoods = res.data;
        this.$show.$emit("ceshi", this.goodsArr.length);
        this.handleListApproveHistory();
        this.computPro();
      });
    },
    computPro() {
      for (var i = 0; i < this.goodsArr.length; i++) {
        var sNum = this.goodsArr[i].g_start_money;

        var eNum = this.goodsArr[i].g_end_money;
        this.progressArr.push(parseInt((sNum / eNum) * 100));
        for (let j = 0; j < this.progressArr.length; j++) {
          this.goodsArr[i].g_type =
            parseInt(this.progressArr[j]) > 100
              ? 100
              : parseInt(this.progressArr[j]);
        }
      }
    },
  },

};
</script>

<style scoped>
.ones {
  color: crimson;
}
/* 众筹中的代码 */
.CrowfBox {
  width: 1200px;
  height: 830px;
  /* border: 1px solid red; */
}
/* 众筹中的里面大框 */
.CrowfItem {
  width: 1300px;
  height: 830px;
  /* border: 1px solid seagreen; */
}
/* 众筹中的里面打印大框  */
.CrowfItem-body {
  width: 1300px;
  height: 780px;
  /* border: 1px solid royalblue; */
}
.CrowfItem-smartBox {
  float: left;
  width: 280px;
  height: 354px;
  background: #fff;
  box-shadow: 0 0 29px #ececec;
  transition: 6s;
  margin: 10px;
}
.CrowfItem-smartBox:hover .imgs {
  overflow: hidden;
  transform: scale(1.02, 1.02);
}
.CrowfItem-smartBox:hover .thumbs-up-box {
  display: block;
}
.Crow-font-img {
  margin-top: -3px;
  position: absolute;
  width: 75px;
  height: 75px;
  display: inline-block;
  background-position: 0 -241px;
  background-image: url(https://static.360buyimg.com/finance/crowdfunding/list/3.0.0/css/i/status-saba994faed.png);
  margin-left: -283px;
}
/* 点赞框 */
.thumbs-up-box {
  position: absolute;
  margin-left: 216px;
  margin-top: -211px;
  width: 54px;
  height: 26px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 2px;
  line-height: 26px;
  display: none;
}

/* 大拇指图片 */
.thumbs-up-img {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 8px;
  margin-right: 5px;
  background-position: 0 -37px;
  background-image: url(https://static.360buyimg.com/finance/crowdfunding/list/3.0.0/css/i/cur-s4effb5dc05.png);
  background-repeat: no-repeat;
}
/* 文字介绍框 */
.introdu-box {
  width: 240px;
  height: 20px;
  margin-left: -1px;
  margin-top: 14px;
  text-align: center;
  line-height: 20px;
  max-width: 250px;
  color: #323232;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  font-family: "Microsoft Yahei";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 进度条框 */
.progress-box {
  height: 8px;
  border-radius: 4px;
  background: #e6e6e6;
  overflow: hidden;
  margin-left: 20px;
  margin-top: 23px;
  width: 249px;
}
.progress-box-Item {
  display: block;
  height: 8px;
  background-image: url(https://static.360buyimg.com/finance/crowdfunding/list/3.0.0/css/i/status-saba994faed.png);
  background-repeat: no-repeat;
}
.CrowfItem-smartBox-foot {
  width: 250px;
  height: 60px;
  margin-left: 20px;
  margin-top: 5px;
}
.CrowfItem-smartBox-foot-Item {
  width: 250px;
  height: 36px;
}
/* 有写已达的字框 */
.Reached {
  position: relative;
  padding-left: 15px;
  float: left;
  width: 80px;
  height: 34px;
  position: relative;
  padding-left: 15px;
  margin-top: 12px;
}
/* 百分比 */
.percentage {
  font-size: 14px;
  color: #5e5e5e;
  line-height: 18px;
}
/* 有写已达的字 */
.Reached-font {
  color: #a5a5a5;
}
/* 竖线 */
.Vertical-line {
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 36px;
  background: #e7e7e7;
}
/* 有写已愁的的字框 */
.Ready {
  position: relative;
  padding-left: 15px;
  float: left;
  width: 80px;
  height: 34px;
  position: relative;
  padding-left: 15px;
  margin-top: 12px;
}
/* 百分比 */
.percentage2 {
  font-size: 14px;
  color: #5e5e5e;
  line-height: 18px;
}
/* 有写已达的字 */
.Ready-font2 {
  color: #a5a5a5;
}
/* 有写剩余时间的框 */
.Remaining-time {
  position: relative;
  padding-left: 15px;
  float: left;
  width: 80px;
  height: 34px;
  position: relative;
  padding-left: 15px;
  margin-top: 12px;
}
/* 百分比 */
.percentage3 {
  font-size: 14px;
  color: #5e5e5e;
  line-height: 18px;
}
/* 有写剩余时间的字 */
.Remaining-time-font {
  color: #a5a5a5;
}
/* 分页按钮 */
.pageBtn {
  margin-left: 885px;
}
</style>
